<template>
  <div>
    <div style="width: 1000px; height: 800px">
      <div style="margin-bottom: 20px">
        <el-input
          placeholder="year"
          v-model="year"
          style="margin-bottom: 10px"
        ></el-input>
        <el-input
          placeholder="content"
          v-model="content"
          type="textarea"
        ></el-input>
      </div>
      <el-space style="margin-bottom: 15px">
        <el-button @click="onPreview(false)">模版预览</el-button>
        <el-button @click="onPreview(true)">设置模板变量</el-button>
        <el-button @click="onExport">导出文件</el-button>
      </el-space>
      <docxPreview ref="docxPreviewRef"></docxPreview>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import docxPreview from './docxPreview.vue'

const docxPreviewRef = ref()
const year = ref()
const content = ref('')

let data: Record<string, any> | undefined
const onPreview = (setData = true) => {
  data = setData
    ? {
        year: year.value,
        content: content.value
      }
    : undefined
  docxPreviewRef.value?.docxPreview('template.docx', data)
}

const onExport = () => {
  docxPreviewRef.value?.docxExport('template.docx', data)
}
</script>

<style lang="scss" scoped></style>
